{% extends "TextBadger/base.html" %}

{% block css %}
	<link rel="stylesheet" href="/static/TextBadger/css/projects.css">
{% endblock %}

{% block onDocLoad %}
        $('.menuitem').removeClass('menuitemselected');
        $("#mnuprojects").addClass("menuitemselected");
{% endblock %}

{% block maincontent %}
	<div id="PageHeading">
		<div id="PageName">My Projects</div>
	</div>

	<div id="PageContent">
		<table><tr>
			<td style="width:40%;">
				{% if not user_projects %}
					<div class='notification ui-state-highlight ui-corner-all'>You have no Projects associated with your account</div>
				{% else %}
				{% for user_project in user_projects %}	
				<div class='Section'>
					<div class='SectionTitle'>
						<a href='/project/?pid={{ user_project.project.id }}'>{{ user_project.project.name }}</a>
						<a href='/leave/project/?pid={{ user_project.project.id }}' onclick='return confirm("Are you sure you want to leave this project?");' style='float:right;' class='ui-icon ui-icon-closethick' title='Leave Project'></a>
					</div>
					<div class='SectionContent'>
						<div class='SectionItem'>
							{{ user_project.project.description }}
						</div>
						<div class='SectionItem'>
                                                	<b>Partners :</b>
							<div>
								{% for partner in user_project.project.Users.all %}
								{% if partner.user.id != user.id %}
								<a href='/user/?uid={{ partner.user.id }}'>{{ partner.user.firstname }} {{ partner.user.lastname }}</a>
								{% endif %}
								{% endfor %}
							</div>
						</div>
						<div class='SectionItem'>
                                                        <b>Progress :</b>
							<div>200 documents yet to be labelled</div>
                                                </div>
					</div>
				</div>
				{% endfor %}
				{% endif %}
			</td>
			<td style='width:40%;padding-left:80px;'>
				<div class='Section'>
                                        <div class='SectionTitle'>New project</div>
                                	<div class='SectionContent'>
						<form action='/new/project/' method='POST'>
                                                <div class='SectionItem'>
							<div>
								<label class='fieldlabel' for='projectname'>Project Name : </label>
								<input type='text' name='pname' id='pname' required='required' />
							</div>
							
							<div>
                                                        	<label class='fieldlabel' for='projectdesc'>Description : </label>
                                                        	<textarea name='pdesc' rows=5></textarea>
                                                        </div>
                                                </div>
                                        	
						<div class='SectionItem'>
                                                        <div class='ajaxlistcreator'>
                                                        	<label class='fieldlabel'>Add Partner : </label>
                                                        	<input type='text' id='partner' />
								<a href='/search/user/?unique' style='font-size:14px;' class="ajaxpost button-base button-small button-blue">+</a>
								
								<div style='margin:5px 0px 5px 95px;width:190px;' class="ui-corner-all negativeresponse hidden">
				                                </div>
                                                        	
								<div style='margin-left:95px;' class='ajaxlist'>
								</div>	

								<input type='hidden' name='partners' class='ajaxhiddenlist' value='' />	
							</div>
                                                </div>
	
						<input type = "submit" class="button-base button-medium button-blue" id="btnCreate" value="Create Project" onclick='if($("#pname").val() == "") return false;' />
						</form>        
                                        </div>
				</div>
			</td>
		</tr></table>
	</div>
{% endblock %}

